<script lang="ts" setup>
import { formRule } from './rule'
import type { MenuType, MenuTypeWriteParamsType } from '../utils/model'
import { getAllParentIds } from '@/utils/dept'
import SpDict from '@/components/SpDict/index.vue'
import type { SysRoleListType } from '@/views/admin/system/role/utils/model'

type Props = {
  id?: number
  /* 编辑的数据 */
  data: MenuType
  /* 菜单树 */
  treeData: MenuType[]
  /* 角色列表 */
  roleList: SysRoleListType[]
  /* 标题 */
  title: string
}

// 表单Ref
const formRef = ref()
// props
const { id, treeData, data, roleList, title } = defineProps<Props>()
// 表单数据
const formState = ref<MenuTypeWriteParamsType>({
  title: '',
  perms: '',
  isMenu: 1,
  showLink: 1,
  pid: 0
})
// 菜单类型数组
const menuTypes = reactive(['菜单', '权限'])
// 菜单类型
const menuType = ref(menuTypes[0])
// 选中的key
const menuSelectKeys = ref<number[]>([])
// 角色选择
const roleSelectKeys = ref<string[]>([])

// 判断是否是修改
if (title == '新增') {
  menuSelectKeys.value = getParentId(data.id as number)
  if (menuSelectKeys.value) {
    formState.value.pid = menuSelectKeys.value[menuSelectKeys.value.length - 1]
  }
} else if (title == '编辑') {
  menuSelectKeys.value = getParentId(data.pid as number)
  Object.assign(formState.value, data)
  // 格式化角色
  if (data.roles) {
    let roleIds = []
    data.roles.forEach((item) => {
      roleList.forEach((it) => {
        if (item == it.code) {
          roleIds.push(it.id)
        }
      })
    })
    roleSelectKeys.value = roleIds
  }
  // 菜单类型
  menuType.value = formState.value.isMenu == 1 ? menuTypes[0] : menuTypes[1]
}
// 获取父级id
function getParentId(id: number | undefined) {
  if (id == undefined) return
  const ids = getAllParentIds(id, treeData)
  return ids[0] == 0 ? [] : ids
}

function getRef() {
  return formRef.value
}

function menuTypeChange(type: string) {
  formState.value.isMenu = type == menuTypes[0] ? 1 : 0
  if (type == menuTypes[1]) {
    formState.value.showLink = 0
  }
}

// 部门选择
function changeSelect(value: number[] | undefined) {
  formState.value.pid = value == undefined ? 0 : value[value.length - 1]
}

// 角色选择
watch(roleSelectKeys, (value) => {
  formState.value.roles = value
})

defineExpose({ getRef })
</script>

<template>
  <a-form
    ref="formRef"
    :labelCol="{ style: { width: '90px' } }"
    :model="formState"
    :rules="formRule"
    label-align="left"
    style="margin-top: 15px"
  >
    <a-row :gutter="30">
      <a-col :span="24">
        <a-form-item label="菜单类型" name="isMenu">
          <a-segmented v-model:value="menuType" :options="menuTypes" @change="menuTypeChange" />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item label="上级菜单" name="pid">
          <a-cascader
            v-model:value="menuSelectKeys"
            :field-names="{ label: 'title', value: 'id', children: 'children' }"
            :options="treeData"
            change-on-select
            placeholder="请选择上级菜单"
            @change="changeSelect"
          />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="菜单名称" name="title">
          <a-input v-model:value="formState.title" placeholder="请输入菜单名称" />
        </a-form-item>
      </a-col>
      <a-col v-if="menuType == menuTypes[0]" :span="12">
        <a-form-item label="路由名称" name="name">
          <a-input v-model:value="formState.name" placeholder="请输入路由名称" />
        </a-form-item>
      </a-col>
      <a-col v-if="menuType == menuTypes[0]" :span="12">
        <a-form-item label="菜单排序" name="rank">
          <a-input-number
            v-model:value="formState.rank"
            min="0"
            placeholder="请输入菜单排序"
            style="width: 100%"
          />
        </a-form-item>
      </a-col>
      <a-col v-if="menuType == menuTypes[0]" :span="12">
        <a-form-item label="路由地址" name="path">
          <a-input v-model:value="formState.path" placeholder="请输入路由地址" />
        </a-form-item>
      </a-col>

      <a-col v-if="menuType == menuTypes[0]" :span="12">
        <a-form-item label="菜单图标" name="icon">
          <IconSelect v-model="formState.icon" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="权限标识" name="perms">
          <a-input v-model:value="formState.perms" placeholder="请输入权限标识" />
        </a-form-item>
      </a-col>
      <a-col v-if="menuType == menuTypes[0]" :span="12">
        <a-form-item label="角色" name="roles">
          <a-select v-model:value="roleSelectKeys" mode="multiple" placeholder="请选择角色">
            <a-select-option v-for="item in roleList" :key="item.id" :value="item.id">{{
              item.name
            }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col v-show="menuType == menuTypes[0]" :span="12">
        <SpDict
          v-model="formState.showLink"
          dictType="sys_menu_show"
          label="菜单显示"
          name="showLink"
          type="radio"
        />
      </a-col>
    </a-row>
  </a-form>
</template>

<style scoped></style>
